<template>
  <a-modal
    v-model:open="open"
    @ok="handleOk"
    :maskClosable="false"
    wrapClassName="plain"
    title="新增人员信息"
    @cancel="close"
    width="45%"
  >
    <div class="form">
      <a-form
        :model="formData"
        ref="formRef"
        :rules="rules"
        :labelCol="{
          style: {
            width: '100px',
          },
        }"
        class="float-form"
      >
        <!-- 上传组件 -->
        <PicUpload style="height: 210px" v-model="files" />
        <a-form-item label="姓名" name="name">
          <a-input v-model:value="formData.name" />
        </a-form-item>
        <a-form-item label="工号">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="性别">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="民族">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="籍贯">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="学历">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="学位">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="职务">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="岗位">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="身份证号">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="在岗状态">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="出生日期">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="婚姻状况">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="政治面貌">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="党团时间">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="移动电话">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="固定电话">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="卫星电话">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="短号电话">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="单位邮箱" class="float-left-100">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="个人邮箱" class="float-left-100">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="居住地址" class="float-left-100">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="通信地址" class="float-left-100">
          <a-input></a-input>
        </a-form-item>

        <a-form-item label="邮政编码">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="入职时间">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="人员标签" class="float-left-100">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="人员类别">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="人员等级">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="专家领域" class="float-left-100">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="所属单位" class="float-left-100">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="所属部门">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="所属辖区">
          <a-input disabled value="111"></a-input>
        </a-form-item>
        <a-form-item label="驻地经度">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="驻地纬度">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="是否执勤">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="显示顺序">
          <a-input></a-input>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script setup>
import PicUpload from '@/components/form-upload/index.vue'
import FormItem from './form-item.vue'
import { message } from 'ant-design-vue'
const props = defineProps({
  show: { type: Boolean, default: false },
})
const emmit = defineEmits(['close'])
const formRef = ref()
const files = ref([])

const open = ref(true)
const close = () => {
  setTimeout(() => {
    emmit('close')
  }, 500)
}

const formData = reactive({
  name: '',
})
const rules = ref({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
})

const handleOk = async () => {
  // console.log('ok')
  // open.value = false
  // setTimeout(() => {
  //   emmit('close')
  // }, 500)

  try {
    const validateRs = await formRef.value.validate()
    console.log('🚀------ ~ add-person.vue:127 ~ handleOk ~ validateRs:', validateRs)
  } catch (e) {
    console.log('🚀------ ~ add-person.vue:127 ~ handleOk ~ e:', e)
    message.error(e.errorFields[0].errors[0])
  }
}

watch(
  () => files.value,
  (newVal) => {
    console.log('🚀------ ~ add-person.vue:130 ~ newVal:', newVal)
  }
)
</script>

<style lang="scss" scoped>
.form {
  padding: 10px;
  padding-right: 20px;
}

.float-left-50 {
  float: left;
  width: 50%;
}
</style>
